import { defineComponent, ref, computed, provide, inject, withModifiers } from 'vue'
import type { Ref } from 'vue'
import { NModal } from 'naive-ui'
import { useFullscreen } from '@vueuse/core'
import MacHeader from '@/components/codeBlock/MacHeader'
import pageStyle from './styles/index.module.scss'
import * as monaco from 'monaco-editor'
import { getCodeList } from '@/utils/toCode'
import type { addEditState } from '@/types/baseConfig'
const folderItem = defineComponent({
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  emits: ['update:item'],
  setup(props) {
    const { folderCurren, setFolderCurren } = inject('folder') as {
      folderCurren: Ref<string>
      setFolderCurren: (e: any) => void
    }
    const info = props.item
    const isOpen = ref(false)
    if (info.type === 'folder') {
      isOpen.value = info.isOpen
    }
    const handClick = () => {
      if (info.type === 'folder') {
        isOpen.value = !isOpen.value
      } else {
        setFolderCurren(info)
      }
    }
    return () => (
      <div class="directory-item">
        <div
          class={`cell ${folderCurren.value === info.uid && 'cell-active'}`}
          onClick={withModifiers(() => {
            handClick()
          }, ['stop'])}
        >
          {info.type === 'folder' ? (
            <span class={`folder ${isOpen.value ? 'dVSJJn' : 'cxOFMm'}`}></span>
          ) : (
            <i class="esayIcon esayIcon-react_ts"></i>
          )}

          <span class="folder-name">{info.name}</span>
        </div>
        {info.type === 'folder' && isOpen.value && (
          <div class="directory-list">
            {info.childer.map((el: any) => (
              <folderItem v-model:item={el} />
            ))}
          </div>
        )}
      </div>
    )
  }
})
export default defineComponent({
  setup: function (props, { expose }) {
    const modalRef = ref()
    const { isFullscreen, toggle } = useFullscreen(modalRef)
    const codeStyle = computed(() => {
      const style: any = {}
      if (isFullscreen.value) {
        style.flex = 1
      } else {
        style.height = '60vh'
        style.width = '570px'
      }
      return style
    })
    const folderList: any = ref([])
    const folderCurren = ref('')
    const setFolderCurren = (e: any) => {
      folderCurren.value = e.uid
      codeText.value = e.code
      editor.setValue(codeText.value)
      monaco.editor.setModelLanguage(editor.getModel(), e.language)
    }

    provide('folder', {
      folderCurren,
      setFolderCurren
    })
    const codeText = ref<string>('')
    let editor: any = null
    const dataBox = ref()
    const initEditor = () => {
      editor = monaco.editor.create(dataBox.value, {
        theme: 'vs-dark', //官方自带三种主题vs, hc-black, or vs-dark
        value: codeText.value, //编辑器初始显示文字
        readOnly: false,
        automaticLayout: true,
        language: 'typescript',
        folding: true, //代码折叠
        roundedSelection: true, // 右侧不显示编辑器预览框
        autoIndent: 'keep' // 自动缩进
      })
    }
    const show = ref(false)
    const close = () => {
      show.value = false
    }
    const open = (addEdit: addEditState) => {
      show.value = true
      folderList.value = getCodeList('tsx', addEdit)
      const folderInfo = folderList.value.find((el: any) => el.uid === '001')
      folderCurren.value = folderInfo.childer[0].childer[0].childer[0].uid
      codeText.value = folderInfo.childer[0].childer[0].childer[0].code
      setTimeout(() => {
        initEditor()
      }, 200)
    }
    expose({
      open
    })
    return () => (
      <NModal show={show.value} onUpdateShow={close}>
        <div ref={modalRef} class={pageStyle.Codedirectory}>
          <div class="mr-[10px] mt-[10px]">
            <MacHeader
              title=""
              show-desc={false}
              is-fullscreen={isFullscreen.value}
              onToggle={toggle}
              onClose={close}
            />
          </div>
          <div class="content">
            <div class="content-left">
              <n-scrollbar style="max-height: 120px">
                <div class="directory-list">
                  {folderList.value.map((el: any) => (
                    <folderItem v-model:item={el} />
                  ))}
                </div>
              </n-scrollbar>
            </div>
            <div class="content-main">
              <div class="codeBox" ref={dataBox} style={codeStyle.value}></div>
            </div>
          </div>
        </div>
      </NModal>
    )
  }
})
